<template>
  <v-container>
    <v-row>
      <v-col sm="12" md="8" offset-md="2" class="mb-3">
        <v-card>
          <v-form ref="form" v-model="valid">
            <v-card-text class="pb-0">
              <v-textarea
                      :rules="contentRule"
                      prepend-inner-icon="mdi-comment"
                      name="new-blog-content"
                      label="Say something"
                      v-model="blogContent"
              ></v-textarea>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                      text
                      :disabled="!valid"
                      :loading="loading"
                      @click="handlePost"
              >Post</v-btn>
            </v-card-actions>
          </v-form>
          <v-progress-linear
              bottom
              color="primary"
              :indeterminate="loading"
              :active="loading"
          ></v-progress-linear>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col sm="12" md="8" offset-md="2" class="pb-0">
        <Pager
          :current="pager.page"
          :pageSize="pager.pageSize"
          :total="pager.total"
          :totalPages="pager.totalPages"
          class="mx-auto"
          @page="handlePage"
        ></Pager>
      </v-col>
    </v-row>
    <v-row>
      <v-col sm="12" md="8" offset-md="2">
        <v-card v-for="b in blogs" :key="'blog-' + b.id" class="mb-3">
          <v-card-text>
            <p class="display-1 text--primary">
              {{b.content}}
            </p>
            <div>
              {{b.user | nameOfUser}} | {{b.publishTime | moment('YYYY-MM-DD HH:mm:ss')}}
              <v-btn
                  v-if="isAdmin"
                  icon class="float-right"
              @click.stop="showDeleteDialog(b.id)">
                <v-icon>mdi-delete</v-icon>
              </v-btn>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-dialog
      v-model="promptDeleteDialog"
      max-width="600px"
      persistent
    >
      <v-card>
        <v-card-title class="headline">Confirmation</v-card-title>
        <v-card-text>
          Are you sure to delete this item?
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn text @click.stop="hideDeleteDialog">No</v-btn>
          <v-btn color="green darken-1" text @click="handleDelete" :loading="loading">Delete it anyway</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
  import {addBlog, getBlogs, deleteBlog} from "../../api/blogs";
  import Pager from "../../components/Pager/Pager";
  export default {
    name: 'blog',
    components: {Pager},
    data: () => ({
      valid: false,
      loading: true,
      promptDeleteDialog: false,
      blogToDelete: null,
      pager: {
        page: 1,
        pageSize: 20,
        total: 1,
        totalPages: 1,
      },
      blogContent: '',
      contentRule: [
        v => !!v && v.length > 0 || 'Blog content required',
      ],
      blogs: [],
    }),
    computed: {
      isAdmin() {
        return this.$store.getters.user.admin;
      }
    },
    methods: {
      handlePost() {
        addBlog(this.blogContent).subscribe(res => {
          if (res.data) {
            this.$toasted.info('Posted');
            this.$refs['form'].reset();
            this.loadBlogs();
          }
        }, err => {
          this.$toasted.error(err);
        })
      },
      handleDelete() {
        this.loading = true;
        deleteBlog(this.blogToDelete).subscribe(res => {
          if (res.status === 200) {
            this.$toasted.info('Blog deleted');
            this.loadBlogs();
            this.hideDeleteDialog();
          }
        }, err => {
          this.$toasted.error(err);
          this.loading = false;
        })
      },
      showDeleteDialog(id) {
        this.blogToDelete = id;
        this.promptDeleteDialog = true;
      },
      hideDeleteDialog() {
        this.blogToDelete = null;
        this.promptDeleteDialog = false;
      },
      handlePage(page) {
        this.pager.page = page.current;
        this.pager.pageSize = page.pageSize;
        this.loadBlogs();
      },
      loadBlogs() {
        this.loading = true;
        getBlogs(this.pager.page, this.pager.pageSize).subscribe(res => {
          // console.log(res);
          if (res.data) {
            const {current, pageSize, total, totalPages, data} = res.data;
            this.blogs = data;
            this.pager.page = current;
            this.pager.pageSize = pageSize;
            this.pager.total = total;
            this.pager.totalPages = totalPages;
          }
          this.loading = false;
        }, err => {
          this.loading = false;
          this.$toasted.error(err);
        })
      }
    },
    mounted() {
      this.loadBlogs();
    }
  };
</script>
